<template>
  <div class="reports-page">
    <h2>报表统计</h2>
    
    <!-- 图表区域 -->
    <div class="charts-grid">
      <!-- 利润趋势 -->
      <el-card class="chart-card">
        <template #header>
          <span>利润趋势</span>
        </template>
        <div class="chart-container">
          <v-chart :option="profitTrendOption" />
        </div>
      </el-card>
      
      <!-- 订单分布 -->
      <el-card class="chart-card">
        <template #header>
          <span>订单分布</span>
        </template>
        <div class="chart-container">
          <v-chart :option="orderDistributionOption" />
        </div>
      </el-card>
      
      <!-- 平台对比 -->
      <el-card class="chart-card">
        <template #header>
          <span>平台对比</span>
        </template>
        <div class="chart-container">
          <v-chart :option="platformComparisonOption" />
        </div>
      </el-card>
      
      <!-- 成本分析 -->
      <el-card class="chart-card">
        <template #header>
          <span>成本分析</span>
        </template>
        <div class="chart-container">
          <v-chart :option="costAnalysisOption" />
        </div>
      </el-card>
    </div>

    <!-- 详细数据表格 -->
    <el-card class="table-card">
      <template #header>
        <span>详细数据</span>
        <el-button type="primary" size="small" @click="handleExport">导出报表</el-button>
      </template>
      <el-table :data="reportData" style="width: 100%" v-loading="loading">
        <el-table-column prop="date" label="日期" width="120" />
        <el-table-column prop="platform" label="平台" width="100" />
        <el-table-column prop="order_count" label="订单数" width="100" />
        <el-table-column prop="revenue" label="收入" width="120">
          <template #default="{ row }">
            {{ formatMoney(row.revenue) }}
          </template>
        </el-table-column>
        <el-table-column prop="cost" label="成本" width="120">
          <template #default="{ row }">
            {{ formatMoney(row.cost) }}
          </template>
        </el-table-column>
        <el-table-column prop="profit" label="利润" width="120">
          <template #default="{ row }">
            <span :class="{ 'profit-positive': row.profit > 0, 'profit-negative': row.profit < 0 }">
              {{ formatMoney(row.profit) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="profit_rate" label="利润率" width="100">
          <template #default="{ row }">
            {{ row.profit_rate }}%
          </template>
        </el-table-column>
        <el-table-column prop="avg_order_value" label="平均订单金额" width="150">
          <template #default="{ row }">
            {{ formatMoney(row.avg_order_value) }}
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="pagination.current"
          v-model:page-size="pagination.size"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, BarChart, PieChart } from 'echarts/charts'
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import VChart from 'vue-echarts'

use([CanvasRenderer, LineChart, BarChart, PieChart, GridComponent, TooltipComponent, LegendComponent])

// 分页信息
const pagination = reactive({
  current: 1,
  size: 20,
  total: 0
})

// 加载状态
const loading = ref(false)

// 报表数据
const reportData = ref([
  {
    date: '2024-01-01',
    platform: '抖音',
    order_count: 100,
    revenue: 29900.00,
    cost: 20000.00,
    profit: 9900.00,
    profit_rate: 33.1,
    avg_order_value: 299.00
  },
  {
    date: '2024-01-02',
    platform: '抖音',
    order_count: 120,
    revenue: 35800.00,
    cost: 24000.00,
    profit: 11800.00,
    profit_rate: 33.0,
    avg_order_value: 298.33
  },
  {
    date: '2024-01-03',
    platform: '抖音',
    order_count: 80,
    revenue: 23920.00,
    cost: 16000.00,
    profit: 7920.00,
    profit_rate: 33.1,
    avg_order_value: 299.00
  }
])

// 利润趋势图表配置
const profitTrendOption = ref({
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['利润', '收入', '成本']
  },
  xAxis: {
    type: 'category',
    data: ['1月1日', '1月2日', '1月3日', '1月4日', '1月5日', '1月6日', '1月7日']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '利润',
      type: 'line',
      data: [9900, 11800, 7920, 10500, 8900, 12000, 9500],
      smooth: true
    },
    {
      name: '收入',
      type: 'line',
      data: [29900, 35800, 23920, 31500, 26900, 36000, 28500],
      smooth: true
    },
    {
      name: '成本',
      type: 'line',
      data: [20000, 24000, 16000, 21000, 18000, 24000, 19000],
      smooth: true
    }
  ]
})

// 订单分布图表配置
const orderDistributionOption = ref({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '订单分布',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: '已完成' },
        { value: 735, name: '待发货' },
        { value: 580, name: '已发货' },
        { value: 484, name: '已取消' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
})

// 平台对比图表配置
const platformComparisonOption = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['订单数', '收入', '利润']
  },
  xAxis: {
    type: 'category',
    data: ['抖音', '淘宝', '京东', '拼多多']
  },
  yAxis: [
    {
      type: 'value',
      name: '订单数'
    },
    {
      type: 'value',
      name: '金额(万元)'
    }
  ],
  series: [
    {
      name: '订单数',
      type: 'bar',
      data: [300, 250, 200, 150]
    },
    {
      name: '收入',
      type: 'bar',
      yAxisIndex: 1,
      data: [8.97, 7.5, 6.0, 4.5]
    },
    {
      name: '利润',
      type: 'bar',
      yAxisIndex: 1,
      data: [2.97, 2.25, 1.8, 1.35]
    }
  ]
})

// 成本分析图表配置
const costAnalysisOption = ref({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '成本构成',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: '商品成本' },
        { value: 735, name: '运费成本' },
        { value: 580, name: '平台费用' },
        { value: 484, name: '其他成本' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
})

// 导出报表
const handleExport = () => {
  // TODO: 调用导出API
  ElMessage.success('报表导出成功')
}

// 分页大小改变
const handleSizeChange = (size: number) => {
  pagination.size = size
  fetchReportData()
}

// 当前页改变
const handleCurrentChange = (current: number) => {
  pagination.current = current
  fetchReportData()
}

// 获取报表数据
const fetchReportData = async () => {
  try {
    loading.value = true
    // TODO: 调用API获取报表数据
    pagination.total = 100
  } catch (error) {
    ElMessage.error('获取报表数据失败')
  } finally {
    loading.value = false
  }
}

// 格式化金额
const formatMoney = (amount: number) => {
  return `¥${amount.toFixed(2)}`
}

onMounted(() => {
  fetchReportData()
})
</script>

<style scoped>
.reports-page {
  padding: 20px;
}

.reports-page h2 {
  margin-bottom: 20px;
  color: #333;
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.chart-card {
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.chart-container {
  height: 300px;
}

.table-card {
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.table-card :deep(.el-card__header) {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination-wrapper {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.profit-positive {
  color: #67c23a;
}

.profit-negative {
  color: #f56c6c;
}
</style> 